<template>
    <div>
        <h2>显示</h2>
        <table border="1" class="table table-border">
            <tr>
                <td>编号</td>
                <td>酒店名称</td>
                <td>酒店电话</td>
                <td>酒店图片</td>
                <td>酒店地址</td>
                <td>酒店特色</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list" :key="item.id" v-bind:value="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.phone }}</td>
                <td> <img  v-bind:src="item.photo" width="50" height="50"/> </td>
                <td>{{ item.address }}</td>
                <td>{{ item.createtime.substring(0,10) }}</td>
                <td>{{ item.tatess }}</td>
            </tr>
        </table>
        <select>
            <option value="">请选择</option>
            <option v-for="i in arr" :key="i.id" v-bind:value="i.id">{{ i.name }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    let arr=ref([
        {id:1,name:"阿萨德"},
        {id:2,name:"豆腐"},
    ]);
    let list=ref(
        [
            {id:1,name:"北京如家酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
            {id:2,name:"北京疏风酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
            {id:3,name:"北京禾果酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
            {id:4,name:"北京一封酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
            {id:5,name:"北京疏风酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
            {id:6,name:"北京禾果酒店",phone:"15544758291",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平",tatess:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},

        ]
    );
</script>

<style scoped>

</style>